<!--
 * @Description:  setPlan - 调整学习计划 
 * @Author: your name
 * @Date: 2024-02-27
 * @LastEditTime: 2024-02-27
 * @LastEditors: Please set LastEditors
-->

<template>
  <div class="planDialog">
    <div class="inner two" v-if="currentId == 10">
      <div class="topBtns">
        <button
          :class="{ act: typeId != i }"
          @click="chooseType(i)"
          v-for="(e, i) in planTypeArr"
          :key="'planType' + i"
        >
          {{ e }}
        </button>
      </div>
      <button @click="nextStep" class="sureBtn">确定</button>
      <img
        @click="closePlan"
        class="closeBtn"
        src="@/assets/images/logo_close.png"
        alt=""
      />
    </div>

    <div class="inner one" v-loading="loading" v-if="currentId == 1">
      <h5 class="tit">自定义学习计划</h5>
      <div class="top">
        <el-checkbox
          fill="#0193ff"
          v-model="checkedAll"
          @change="allChange()"
        />
        <p>
          <span>选择任务</span> &nbsp;&nbsp;&nbsp;
          <small style="padding-left: 10px">可拖拽章节调整顺序</small>
        </p>
      </div>

      <div class="mainBtm">
        <div v-for="(ele, idx) in 3" :key="idx + 'v'" class="bigBox">
          <div class="name">
            <el-checkbox @change="parentChange(ele)" v-model="ele.isChecked" />
            <p @click="childShow = !childShow">
              <span>基础班</span>
              <span style="font-weight: normal">
                总任务时长：总任务时长：48小时19分
              </span>
            </p>
          </div>
          <div class="childBox" v-if="childShow">
            <div v-for="(item, index) in 2" :key="index + 'k'">
              <div class="name">
                <el-checkbox
                  @change="childChange(ele, item)"
                  v-model="item.isChecked"
                />
                <p @click.stop="item.childShow = !item.childShow">
                  机考平台操作指南
                </p>
              </div>
              <div class="innerBox" v-if="childShow">
                <draggable
                  v-model="item.child"
                  chosenClass="chosen"
                  forceFallback="true"
                  :group="'people' + item.name"
                  animation="800"
                  @start="onStart(item.child)"
                  @end="onEnd(item.child)"
                >
                  <transition-group>
                    <div class="innerChild" v-for="(e, i) in 2" :key="i + 'n'">
                      <el-checkbox
                        @change="lastChange(ele, item, e)"
                        v-model="e.isChecked"
                      />
                      <div class="innerItem">ACCA官网登陆方法</div>
                    </div>
                  </transition-group>
                </draggable>
              </div>
            </div>
          </div>
        </div>
      </div>

      <button class="btmBtn" @click="surePlan">确定</button>
      <img
        @click="closePlan"
        class="closeBtn"
        src="@/assets/images/logo_close.png"
        alt=""
      />
    </div>

    <div class="inner three" v-if="currentId == 0">
      <h5 class="tit" v-if="typeId == 0">自定义学习计划</h5>
      <h5 class="tit" v-if="typeId == 1">默认学习计划</h5>
      <div class="main">
        <div class="item">
          <h5 class="itemTit">学习任务</h5>
          <p class="missionText">
            总学习任务<span>0个</span> &nbsp;&nbsp;&nbsp;总学习时长<span>
              0小时
            </span>
          </p>
        </div>
        <div class="item">
          <h5 class="itemTit">学习时间</h5>
          <div class="timeBox">
            <el-date-picker
              v-model="startTime"
              size="small"
              style="width: 150px"
              type="date"
              placeholder="年 / 月 / 日"
              :picker-options="startPickerOptions"
            >
            </el-date-picker>
            <span> -- </span>
            <el-date-picker
              v-model="endTime"
              size="small"
              style="width: 150px"
              type="date"
              placeholder="年 / 月 / 日"
              :picker-options="endPickerOptions"
            >
            </el-date-picker>
          </div>
        </div>
        <div class="item">
          <h5 class="itemTit">周末每天学习时长</h5>
          <el-select
            style="width: 120px"
            v-model="timeLen"
            size="small"
            placeholder="请选择"
            @change="changedattime"
          >
            <el-option
              v-for="item in options"
              :key="'options' + item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="item">
          <h5 class="itemTit">周学习天数</h5>
          <ul class="days">
            <li
              :class="{ choosed: itemDay.isCheck }"
              v-for="(itemDay, index) in week"
              :key="'itemDay' + index"
              @click="changdays(itemDay, index)"
            >
              {{ itemDay.day }}
            </li>
          </ul>
        </div>
        <div class="item">
          <h5 class="itemTit">计划概况</h5>
          <p class="missionText">
            学习天数<span>0天</span>&nbsp;&nbsp;&nbsp;平均学习时长<span>
              12小时
            </span>
          </p>
        </div>
        <div class="btmBtn">
          <!-- <button class="act" @click="currentId = 1">上一步</button> -->
          <button @click="subplan()">确定</button>
        </div>
      </div>
      <!-- 关闭按钮 -->
      <img
        @click="closePlan"
        class="closeBtn"
        src="@/assets/images/logo_close.png"
      />
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  name: 'setPlan',
  components: {
    draggable
  },
  data() {
    return {
      mintime: new Date().getTime() - 1000 * 60 * 60 * 24 * 1,
      startPickerOptions: {
        disabledDate: (time) => {
          //小于最小时间或者大于最大时间都不可选
          console.log(
            new Date(time).getTime() - 1000 * 60 * 60 * 24 * 1,
            time.getTime(),
            this.test_day,
            'startPickerOptions'
          )
          return time.getTime() < this.mintime
        }
      },
      endPickerOptions: {
        disabledDate: (time) => {
          //小于最小时间或者大于最大时间都不可选
          return time.getTime() < this.mintime
        }
      },
      childShow: false,
      currentId: 0,
      typeId: 0,
      timeLen: '自动分配',
      loading: false,
      checkedAll: false,
      startTime: '', //开始时间
      endTime: '', // 结束时间
      options: [
        {
          value: '自动分配',
          label: '自动分配'
        },
        {
          value: '2',
          label: '2h'
        },
        {
          value: '3',
          label: '3h'
        },
        {
          value: '4',
          label: '4h'
        },
        {
          value: '5',
          label: '5h'
        },
        {
          value: '6',
          label: '6h'
        },
        {
          value: '7',
          label: '7h'
        },
        {
          value: '8',
          label: '8h'
        },
        {
          value: '9',
          label: '9h'
        },
        {
          value: '10',
          label: '10h'
        },
        {
          value: '11',
          label: '11h'
        },
        {
          value: '12',
          label: '12h'
        },
        {
          value: '13',
          label: '13h'
        },
        {
          value: '14',
          label: '14h'
        },
        {
          value: '15',
          label: '15h'
        },
        {
          value: '16',
          label: '16h'
        }
      ],
      week: [
        { day: '星期日', isCheck: true, index: 0 },
        { day: '星期一', isCheck: true, index: 1 },
        { day: '星期二', isCheck: true, index: 2 },
        { day: '星期三', isCheck: true, index: 3 },
        { day: '星期四', isCheck: true, index: 4 },
        { day: '星期五', isCheck: true, index: 5 },
        { day: '星期六', isCheck: true, index: 6 }
      ],
      weekarr: [0, 1, 2, 3, 4, 5, 6],
      myArray: [],
      planTypeArr: ['自定义计划', '默认计划']
    }
  },
  created() {},
  methods: {
    nextStep() {
      if (this.typeId == 0) {
        this.currentId = 1
      } else {
        this.currentId = 2
      }
    },
    changedattime(rows) {
      console.log(rows, 'changedattime')
      this.timeLen = rows
    },
    changdays(itd, index) {
      itd.isCheck = !itd.isCheck
    },
    subplan() {},
    surePlan() {
      this.currentId = 2
    },
    closePlan() {
      this.currentId = 0
      this.$emit('setPlanShow', false)
    },
    chooseType(inx) {
      this.typeId = inx
      console.log(inx)
    },
    //开始拖拽事件
    onStart(e) {
      console.log('开始拖拽', e)
    },
    //拖拽结束事件
    onEnd(e) {
      console.log('拖拽结束', e)
      console.log(this.myArray)
    },
    parentChange() {
      console.log(12321)
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/assets/styles/index.scss';
.planDialog {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1111;
  .inner {
    width: 520px;
    height: 448px;
    background: url('@/assets/images/setPlan_bg.png') no-repeat center;
    background-size: cover;
    border-radius: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: relative;
    overflow: hidden;
    ::v-deep .el-input__inner {
      border: 1px solid #0193ff;
    }
    ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner,
    ::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      background-color: #0193ff;
      border-color: #0193ff;
    }
    ::v-deep .el-checkbox__inner:hover {
      border-color: #0193ff;
    }
    .closeBtn {
      position: absolute;
      top: 20px;
      left: auto;
      right: 23px;
      cursor: pointer;
    }
    .tit {
      font-size: 18px;
      color: $color-black;
      font-weight: 550;
      text-align: center;
      margin-top: 37px;
    }
    .main {
      width: 100%;
      padding: 0 20px;
      box-sizing: border-box;
    }
    button {
      width: 122px;
      height: 36px;
      background-color: #0193ff;
      border-radius: 5px;
      border: 1px solid #0193ff;
      font-size: 16px;
      color: #fff;
      border: 0;
      outline: 0;
      cursor: pointer;
      &.act {
        background-color: #e8f4ed;
        color: #0193ff;
        border: 1px solid #0193ff;
      }
      &.sureBtn {
        width: 105px;
        display: block;
        margin: 0 auto;
      }
    }
    &.one {
      padding: 0 25px;
      .top {
        display: flex;
        padding-bottom: 13px;
        border-bottom: 1px solid #e6e4e4;
        margin: 17px 0;
        p {
          font-size: 14px;
          color: #666666;
          font-weight: 550;
          margin-left: 12px;
          span {
            font-size: 14px;
            color: $color-black;
          }
        }
      }
      .mainBtm {
        height: 260px;
        overflow-y: auto;
        padding-right: 10px;
        // 滚动条样式
        &::-webkit-scrollbar {
          width: 10px;
        }
        // 滚动槽
        &::-webkit-scrollbar-track {
          border-radius: 10px;
          box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        }
        // 滚动滑块
        &::-webkit-scrollbar-thumb {
          border-radius: 10px;
          background: rgba(0, 0, 0, 0.1);
          box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        }
        .bigBox {
          .el-checkbox {
            margin-right: 10px;
          }
          .name {
            display: flex;
            align-items: center;
            margin-bottom: 14px;
            position: relative;
            cursor: pointer;
            p {
              font-size: 14px;
              color: $color-black;
              span {
                display: inline-block;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                &:first-child {
                  font-weight: 550;
                  width: 75px;
                  margin-right: 5px;
                }
                &:last-child {
                  width: 286px;
                }
              }
            }
            .adjustBtn {
              font-size: 14px;
              color: #0193ff;
              position: absolute;
              top: 0;
              left: auto;
              right: 0;
            }
          }
          .childBox {
            padding-left: 20px;
            .innerBox {
              padding-left: 20px;
              .innerChild {
                display: flex;
                align-items: center;
                margin-bottom: 10px;
                .innerItem {
                  font-size: 14px;
                  color: #666666;
                }
              }
            }
          }
        }
      }
      .btmBtn {
        background: #0193ff;
        border-radius: 5px;
        font-size: 16px;
        color: $color-white;
        display: block;
        margin: 10px auto;
        outline: none;
        border: 0;
      }
    }
    &.two {
      height: 238px;
      background: url('@/assets/images/setplan_bg2.png') no-repeat center;
      background-size: cover;
      .topBtns {
        width: 292px;
        display: flex;
        justify-content: space-between;
        margin: 72px auto 39px;
      }
    }
    &.three {
      height: 518px;
      background: url('@/assets/images/setplan_bg3.png') no-repeat center;
      background-size: cover;
      .main {
        padding: 0 25px;
        box-sizing: border-box;
        .item {
          margin-bottom: 20px;
          .itemTit {
            font-size: 14px;
            color: $color-black;
            font-weight: 550;
            margin-bottom: 15px;
          }
          .missionText {
            font-size: 14px;
            color: $color-black;
            span {
              color: #0193ff;
            }
          }
          .days {
            display: flex;
            justify-content: space-between;
            list-style: none;
            li {
              width: 61px;
              height: 30px;
              background-color: #ecfaf6;
              border-radius: 3px;
              border: solid 1px #0193ff;
              font-size: 14px;
              color: #0193ff;
              text-align: center;
              line-height: 30px;
              cursor: pointer;
              &.choosed {
                background: #0193ff;
                color: #fff;
              }
            }
          }
        }
        .btmBtn {
          width: 250px;
          margin: 0 auto;
          display: flex;
          justify-content: space-between;
          button {
            width: 105px;
          }
        }
      }
    }
  }
}
</style>
